<script setup lang="ts">
import { onMounted, reactive } from 'vue';
//@ts-expect-error longzeVideoPlay视频播放插件
import { longzeVideoPlay } from "longze-vue3-video-player";
import { GameVideoModel, TgaGameModel } from '@/api/webSite/response';
import { getGameVideosApi, getTgaGamesApi } from '@/api/webSite';
import useElementPlusStore from '@/stores/UseElementPlusStore';

const gameVideos = reactive<Array<GameVideoModel>>([]);
const tgaGames = reactive<Array<TgaGameModel>>([]);

onMounted(async () => {
  Object.assign(gameVideos, await getGameVideosApi());
  Object.assign(tgaGames, await getTgaGamesApi());
  options.src = gameVideos[0].videoLink;

  useElementPlusStore().closeLoad();
})

const options = reactive({
  width: "100%", //播放器宽度
  height: "100%", //播放器高度
  color: "#409eff", //主题色
  title: "The Ninth Art", //视频名称
  src: "/public/mp4/the_ninth_art.mp4", //视频源
  muted: false, //静音
  poster: "/public/img/ninthart/the_ninth_art_cover.jpg",
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: true, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});

function switchVideo(gameVideo: GameVideoModel) {
  options.src = gameVideo.videoLink;
}

</script>

<template>

  <div class="main">
    <div class="header">
      <div class="left">

        <div class="tv-antennas">
          <div class="antenna left"></div>
          <div class="antenna right"></div>
        </div>

        <div class="tv-screen">
          <longzeVideoPlay v-bind="options" :poster="options.poster" />
        </div>

      </div>

      <div class="right">
        <ninthArtButton @switchVideo="switchVideo" :gameVideo="item" :key="item.id" v-for="item in gameVideos"
          class="btn">{{ item.name }}
        </ninthArtButton>
      </div>

    </div>

    <div class="body">
      <div class="title">
        <ninthTitle></ninthTitle>
      </div>
      <div class="artInfo">
        <ninthArtCard :gameInfo="item" v-for="item in tgaGames" :key="item.id"></ninthArtCard>
      </div>
    </div>

  </div>


</template>

<style scoped lang="scss">
.main {
  background-color: $bgColor;
  display: flex;
  flex-direction: column;
  align-items: center;

  .header {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 150px;

    .left {
      position: relative;
      height: 600px;
      flex: 1;

      .tv-antennas {
        position: absolute;
        top: -50px;
        width: 100%;
        height: 80px;
        z-index: 1;

        .antenna {
          position: absolute;
          width: 4px;
          height: 60px;
          background: linear-gradient(45deg, #ff6b6b, #ffd93d, #6c5ce7);
          transform-origin: bottom;
          animation: antenna-sway 3s ease-in-out infinite;

          &::after {
            content: '';
            position: absolute;
            top: -8px;
            width: 16px;
            height: 16px;
            background: #fff;
            border-radius: 50%;
            filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
          }

          &.left {
            left: 30%;
            transform: rotate(-15deg);
          }

          &.right {
            right: 30%;
            transform: rotate(15deg);
            animation-delay: -1.5s;
          }
        }

      }

      .tv-screen {

        position: relative;
        top: 20px;
        left: 50px;
        width: 80%;
        height: 90%;
        background: #2d3436;
        border-radius: 12px;
        box-shadow:
          inset 0 0 20px rgba(0, 0, 0, 0.5),
          0 8px 30px rgba(0, 0, 0, 0.3),
          0 0 0 8px #3d3d3d, // 外边框
          0 0 0 12px #555; // 第二层边框

        // 播放器样式调整
        :deep(.longze-video-play) {
          width: calc(100% - 16px);
          height: calc(100% - 16px);
          margin: 8px;
          border-radius: 6px;
          overflow: hidden;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      .btn {
        margin-top: 20px;
        margin-right: 10px;
      }
    }

  }

  .body {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 20px;

    .title {
      margin-top: 30px;
      margin-bottom: 20px;
      text-align: center;
      font-size: 25px;
    }

    .artInfo {
      margin: 0 auto;
      width: 90%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}

@keyframes antenna-sway {

  0%,
  100% {
    transform: rotate(-15deg) scaleY(0.95);
  }

  50% {
    transform: rotate(15deg) scaleY(1.05);
  }
}
</style>
